<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="./css/tab.css">
</head>
<link rel="stylesheet" href="./css/tab.css">
<style>
    * {
        margin: 0;
        padding: 0;
    }


    ul li {
        list-style: none;
    }

    main {
        width: 960px;
        height: 500px;
        border-radius: 10px;
        margin: 50px auto;
    }

    main h4 {
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    span {
        /* display: inline-block; */
        user-select: none;
        /* width: 100px;
        height: 50px; */
    }

    .tabsbox {
        width: 900px;
        margin: 0 auto;
        height: 400px;
        border: 1px solid lightsalmon;
        position: relative;
    }

    nav ul {
        overflow: hidden;
    }

    nav ul li {
        float: left;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-right: 1px solid #ccc;
        position: relative;
    }

    nav ul li.liactive {
        border-bottom: 2px solid #fff;
        z-index: 9;
    }

    #tab input {
        width: 80%;
        height: 60%;
    }

    ul li span:nth-child(1) {
        display: inline-block;
        width: 100px;
        height: 50px;
    }

    nav ul li span:last-child {
        position: absolute;
        user-select: none;
        font-size: 12px;
        top: -18px;
        right: 0;
        display: inline-block;
        height: 20px;
    }

    .tabadd {
        position: absolute;
        /* width: 100px; */
        top: 0;
        right: 0;
    }

    .tabadd span {
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        float: right;
        margin: 10px;
        user-select: none;
    }

    .tabscon {
        width: 100%;
        height: 300px;
        position: absolute;
        padding: 30px;
        top: 50px;
        left: 0px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
    }

    .tabscon section,
    .tabscon section.conactive {
        display: none;
        width: 100%;
        height: 100%;
    }

    .tabscon section.conactive {
        display: block;
    }
</style>

<body>

    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>

                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>
    <!-- <script src="./JS/tab.js"></script> -->
    <script src="./JS/tab1.js"></script>
</body>

</html>